<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>08_员工列表练习</title>
    </head>
    <body>
        <input type="text" placeholder="请输入员工姓名" id="i1">
        <input type="text" placeholder="请输入员工工资" id="i2">
        <input type="text" placeholder="请输入员工岗位" id="i3">
        <button onclick="addEmp()">添加员工</button>
        <hr>
        <table border="1px">
            <caption>员工表</caption>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>岗位</th>
            </tr>
        </table>
        <script>
            let arr = [];
            function addEmp(){
                let uName = document.getElementById('i1').value;
                let uSalary = document.getElementById('i2').value;
                let uJob = document.getElementById('i3').value;

                let tr = document.createElement('tr');
                let nameTd = document.createElement('td');
                let salaryTd = document.createElement('td');
                let jobTd = document.createElement('td');

                nameTd.innerHTML = uName;
                salaryTd.innerHTML = uSalary;
                jobTd.innerHTML = uJob;

                tr.append(nameTd,salaryTd,jobTd);

                let table = document.querySelector('table');
                table.append(tr);

                document.getElementById('i1').value = '';
                document.getElementById('i2').value = '';
                document.getElementById('i3').value = '';

                arr.push({
                    name:uName,
                    salary:uSalary,
                    job:uJob
                });
                console.log(arr);
            }
        </script>
    </body>
</html>